import { useState, useEffect } from 'react'
import { Steps } from 'tdesign-react'
import { ApiRequest, apis } from '@/service'
// import './index.less'

const {
  StepItem
} = Steps

const {
  system: {
    getDictionaryArray,
  }
} = apis.BMService

const BMSteps = (props: any) => {

  const {
    onChange,
    value = [{ label: '提出', value: '0' }],
  } = props

  console.log(value)

  const [STEPS, setSTEPS] = useState<DictionaryListType>([])

  useEffect(() => {
    queryDictionaryArrayFnc('Steps', setSTEPS)
  }, [])

  const queryDictionaryArrayFnc = (dictionaryValue: string, setValue: Function) => {
    const params = {
      dictionaryValue,
    }
    ApiRequest({ api: getDictionaryArray, params }).then((res: any) => {
      setValue(res.data)
    })
  }

  const onStepChange = (value: number | string) => {
    onChange && onChange(STEPS.filter((item: any) => item.value == value))
  }

  return <Steps
    className='bm-steps'
    current={value?.[0]?.value}
    onChange={onStepChange}
  >
    {STEPS.map((item: any) => {
      return <StepItem key={item.value} title={item.label} value={item.value} />
    })}
  </Steps>
}

export default BMSteps
